<!--  单个select  -->
<template>
  <el-select
    class="my-select"
    popper-class="search-select-option"
    v-model="selectVal"
    :teleported="false"
    :suffix-transition="false"
    :fit-input-width="true"
    :placeholder="selectPlaceholder"
    :style="{ width: selectWidth + 'px' }"
    :placement="selectPlacement"
    :selectDisabled="selectDisabled"
    @change="selectChange"
  >
    <el-option
      v-for="(item, index) in selectOption"
      :key="item.value + index"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script setup>
import { onMounted, toRef, watch, ref } from 'vue'

const emits = defineEmits(['update:selectValue', 'selectChange'])
const props = defineProps({
  // select的双向绑定值
  selectValue: {
    type: [String, Number],
    default: ''
  },
  // form表单的prop值，根据它更新form里对应prop的select值
  propName: {
    type: String,
    default: ''
  },
  // 下拉选项
  selectOption: {
    type: Array,
    default: () => {
      return [
        {
          value: 'option1',
          label: '选项一'
        },
        {
          value: 'option2',
          label: '选项一'
        }
      ]
    }
  },
  // 下拉框默认文字
  selectPlaceholder: {
    type: [String, Number],
    default: '请选择'
  },
  // 选择器宽度
  selectWidth: {
    type: Number,
    default: 300
  },
  // 下拉框方向
  selectPlacement: {
    type: String,
    default: ''
  },
  // 选择器是否不可用
  selectDisabled: {
    type: Boolean,
    default: false
  }
})

const selectVal = ref('')
// const { selectValue: selectVal } = toRef(props)

// 监控父组件select的选择，更新给自身
watch(
  () => props.selectValue,
  val => {
    selectVal.value = val
    emits('update:selectValue', val)
  },
  { deep: true }
)

/**
 * @description 下拉选择项更改后更新当前选择的值
 * @param {String} val 当前选择项的value值
 */
const selectChange = val => {
  console.log(val, 'selectChangeVal')
  emits('selectChange', { propName: props.propName, value: val })
}
</script>

<style lang="scss" scoped></style>
